<template>
  <div class="sliderassembly">
    <el-collapse v-model="activeNames">
      <el-collapse-item
        v-for="(items, index) in datas"
        :key="index"
        :title="items.title"
        :name="index + 1"
      >
        <div class="componList">
          <div
            v-for="(item, ind) in items.comList"
            :key="ind"
            class="item"
            draggable="true"
            :data-name="item.name"
            @dragstart="drag($event)"
            @dragend="dragends($event)"
          >
            <div
              class="img"
              :style="{ 'background-image': `url(${item.img})` }"
            ></div>
            <div class="title">{{ item.text }}</div>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
export default {
  name: 'Sliderassembly',
  props: {
    pointer: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      activeNames: [1, 2, 3] /* 侧边栏组件显示 */,
      datas: [
        {
          title: '基础组件',
          comList: [
            {
              text: '顶部导航',
              type: '1-1',
              img: require('@/assets/images/template/nav.png'),
              name: 'topNav'
            },
            {
              text: '轮播图',
              type: '1-2',
              img: require('@/assets/images/template/banner.png'),
              name: 'banner'
            },
            {
              text: '图文导航',
              type: '1-3',
              img: require('@/assets/images/template/textnav.png'),
              name: 'graphicNav'
            },
            {
              text: '广告位',
              type: '1-4',
              img: require('@/assets/images/template/ad.png'),
              name: 'advert'
            },
            {
              text: '意向课程',
              type: '1-8',
              img: require('@/assets/images/template/intent_course.png'),
              name: 'intentCourse'
            },
            {
              text: '课程',
              type: '1-5',
              img: require('@/assets/images/template/course.png'),
              name: 'course'
            },
            {
              text: '讲师',
              type: '1-6',
              img: require('@/assets/images/template/teacher.png'),
              name: 'teacher'
            },
            {
              text: '资讯',
              type: '1-7',
              img: require('@/assets/images/template/topic.png'),
              name: 'topic'
            }
          ]
        }
      ]
    }
  },
  methods: {
    /**
     * 当用户开始拖动元素或选择文本时触发此事件
     *
     * @param {Object} event event对象
     */
    drag(event) {
      /* 开启穿透 */
      this.pointer.show = true
      /* 传递参数 */
      event.dataTransfer.setData('componentName', event.target.dataset.name)
    },

    /**
     * 当拖动操作结束时（释放鼠标按钮或按下退出键），会触发此事件
     *
     * @param {Object} event event对象
     */
    dragends() {
      /* 关闭穿透 */
      this.pointer.show = false
    }
  }
}
</script>

<style scoped lang="scss">
/* 组件 */
.sliderassembly {
  .el-collapse,
  ::v-deep.el-collapse-item__header,
  ::v-deep.el-collapse-item__wrap {
    border: none;
  }
  ::v-deep.el-collapse-item__header {
    padding-left: 20px;
    padding-right: 12px;
  }
  .componList {
    padding: 0 20px;

    /* 组件列表 */
    .item {
      display: inline-flex;
      flex-direction: column;
      justify-content: center;
      width: 50px;
      padding: 15px 0;
      align-items: center;
      cursor: all-scroll;
      transition: all 0.3s;
      margin-right: 40px;
      .img {
        width: 30px;
        height: 30px;
        background-repeat: no-repeat;
        background-position: center;
      }
      .title {
        font-size: 12px;
        color: #303133;
        line-height: 1;
        margin-top: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    .item + .item:nth-child(3n) {
      margin-right: 0;
    }
  }
}
</style>
